<template>
  <div class="">
    <h1>计算属性</h1>
    <p>
      计算属性就是根据现有的data计算出一个新的值，只要跟他有关data发生变化，这个计算属性就会自动重新计算,计算属性长得是一个函数的样子，必须要有一个return值，把计算的结果return出来，用的时候是跟data的用法是一样的
      计算属性的另一个特点是有缓存功能，只有跟他有关的data值发生变化才会重新计算，但是跟他无关的值改变就会从缓存中拿
    </p>
    <input type="text" v-model="title" /><button @click="add">添加</button>
    <h3>一共有{{ sum }}个任务</h3>
    <h3>已完成的有{{ finishLength }}个任务</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "任务1",
          status: true,
        },
        {
          title: "任务2",
          status: false,
        },
        {
          title: "任务3",
          status: true,
        },
        {
          title: "任务4",
          status: false,
        },
      ],
      title: "",
    };
  },
  mounted() {},
  methods: {
    add() {
      this.list.push({ title: this.title, status: true });
    },
  },
  computed: {
    sum() {
      return this.list.length;
    },
    finishLength() {
      let arr = [];
      arr = this.list.filter((item) => {
        return item.status == true;
      });
      return arr.length;
    },
    //已完成的任务的数量
  },

  //   作业1. 简易版计算器，不要=，只要输入内容就会自动计算
};
</script>

<style lang="scss"></style>
